<!--suppress TypeScriptUnresolvedVariable -->
<template>
  <div class="ClashFile">
    <Layout>
      <content>
        <Row>
          <Col span="22">&nbsp;</Col>
          <Col span="2"><Button type="primary" @click="addRoleHandle()">新增文件</Button></Col>
        </Row>
        <!--表格-->
        <Table border :columns="columns" :data="pageInfoResponse.list" size="large">
          <template slot-scope="{ row, index }" slot="urlLink">
            <Input v-if="row.isAble" v-model="row.urlLink" size="large" clearable />
            <Input v-else disabled v-model="row.urlLink" size="large" />
          </template>
          <template slot-scope="{ row, index }" slot="source">
            <Input v-if="row.isAble" v-model="row.source" size="large" clearable />
            <Input v-else disabled v-model="row.source" size="large" />
          </template>
          <template slot-scope="{ row, index }" slot="action">
            <template v-if="row.isAble">
              <Button type="primary" @click="saveRole(row.urlLink,row.source)">保存</Button>
            </template>
            <template v-else>
              <Button  type="error" @click="deleteRole(row.id)">删除</Button>
            </template>
          </template>
        </Table>
      </content>
      <footer>
        <template>
          <Page :total="pageInfoResponse.total" @on-change="getResourceList" :page-size="pageInfoRequest.pageSize" />
        </template>
      </footer>
    </Layout>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator'
import {
  getClashFilePageListUrl, deleteClashFileUrl, uploadClashFileLinkUrl
} from "@/common/HttpRequestUrl";
@Component
export default class ClashFile extends Vue {
  editSwitch = {}
  //  表单对应的列名
  columns= [
    {
      title: '文件名',
      key: 'fileName',
      align: 'center'
    },    {
      title: '原链接地址',
      slot: 'urlLink',
      align: 'center'
    },
    {
      title: '文件来源',
      slot: 'source',
      align: 'center'
    },
    {
      title: '创建时间',
      key: 'createTime',
      align: 'center'
    },
    {
      title: '操作',
      slot: 'action',
      align: 'center'
    }
  ]

  //  分页请求参数参数
  pageInfoRequest = {
    total : 0, //  数据总条数
    pageSize : 8,  //  每页的数据条数
    pageNum : 1 //  当前页数
  }
  //  分页返回参数
  pageInfoResponse = {
    list:[]
  }

  // 初始化方法获取角色列表数据
  mounted () {
    this.getResourceList(this.pageInfoRequest.pageNum,this.pageInfoRequest.pageSize)
  }

  //  查询分页数据
  getResourceList ( pageNum, pageSize ) {

    if ( pageNum != null ) {
      this.pageInfoRequest.pageNum = pageNum
    }
    if ( pageSize != null ) {
      this.pageInfoRequest.pageSize = pageSize
    }
    let objThis = this
    this.$post(getClashFilePageListUrl,{pageNum:this.pageInfoRequest.pageNum,pageSize:this.pageInfoRequest.pageSize}).then(function (res) {

      if (res.status) {
        objThis.pageInfoResponse = res.data
        objThis.pageInfoResponse.list.forEach(value=>value['isAble']=false)
      }
    })
  }

  // ===========================================================================数据编辑与删除=========================================================================
  /**
   * 新增
   */
  addRoleHandle () {
    let value = {isAble:true}
    this.pageInfoResponse.list.push(value)
    console.log(this.pageInfoResponse.list)
  }

  saveRole(id,name) {

    let thisObj = this
    thisObj.$post(uploadClashFileLinkUrl,{link:id,source:name}).then(function (res) {

      if (res.status) {
        thisObj.$Message.success('操作成功')
        //  刷新数据
        thisObj.getResourceList(thisObj.pageInfoRequest.pageNum,thisObj.pageInfoRequest.pageSize)
      }else {
        thisObj.$Message.error('操作失败')
      }
    })
  }

  /**
   * 删除
   */
  deleteRole ( id ) {

    let thisObj = this
    //  对话框弹出层
    this.$Modal.confirm({
      title: '文件删除',
      content: '确认要删除该文件？',
      onOk: () => {

        thisObj.$post(deleteClashFileUrl,{id:id}).then(function (res) {

          if (res.status) {
            thisObj.$Message.success('删除成功')
            //  刷新数据
            thisObj.getResourceList(thisObj.pageInfoRequest.pageNum,thisObj.pageInfoRequest.pageSize)
          }else {
            thisObj.$Message.error('删除失败')
          }
        })
      }
    })
  }
}
</script>


<style scoped>

</style>
